<template>
  <div class="nav-box">
    <div class="nav">
      <RouterLink v-for="item in data" :key="item.id" :to="item.path">
        <img v-if="item.flag" :src="item.blueImg" alt="" />
        <img v-if="!item.flag" :src="item.yellowImg" alt="" />
        <p>{{ item.text }}</p>
      </RouterLink>
    </div>
  </div>
</template>

<script setup>
import { RouterLink, useRoute } from 'vue-router'

let data = [
  {
    id: 1,
    blueImg: './src/assets/images/dao1.jpg',
    yellowImg: '/src/assets/images/dao11.jpg',
    flag: false,
    path: '/',
    text: '智能检测'
  },
  {
    id: 2,
    blueImg: '/src/assets/images/dao2.jpg',
    yellowImg: '/src/assets/images/dao22.jpg',
    flag: false,
    path: '/about',
    text: '就业态势'
  },
  {
    id: 3,
    blueImg: '/src/assets/images/dao3.jpg',
    yellowImg: '/src/assets/images/dao33.jpg',
    flag: false,
    path: '/list',
    text: '安防设备'
  },
  {
    id: 4,
    blueImg: '/src/assets/images/dao4.jpg',
    yellowImg: '/src/assets/images/dao44.jpg',
    flag: false,
    path: '/page',
    text: '运营设备'
  }
]

const { path } = useRoute()
let arr = data.find((item) => item.path == path)
if (arr) {
  arr.flag = true
}
</script>

<style>
.nav-box {
  width: 100%;
  height: 100%;
  background: url('../assets/images/nav.png') no-repeat 0 0 / 100% 100%;
}
.nav {
  display: flex;
  margin-left: 130px;
}
.nav img {
  width: 40px;
  height: 40px;
  margin-left: 25px;
  margin-top: 10px;
}
.nav p {
  margin-left: 15px;
  color: #fff;
  font-size: 14px;
  margin-top: 10px;
}
</style>